<template>
  <view class="box">
    <!--图表-->
    <l-echart ref="chartRef"></l-echart>
    <!--日期选择-->
    <view>
      <wd-row>
        <wd-col :span="6" v-for="(i, k) in dateList" :key="k">
          <view
            :class="i == currentDate ? 'fu-date-active fu-date' : 'fu-date'"
            @click="onClickTab(i)"
          >
            {{ i }}
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { http } from '@/utils/http'

// 定义可传递属性
const props = defineProps({
  // 基金ID,即fundId
  id: {
    type: String,
    default: '',
  },
  // 线型：optional => 自选，hold => 持有，default => 默认
  lineType: {
    type: String,
    default: '',
  },
  // 自选ID
  optId: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['change'])
// 图表
const chartRef = ref(null)
// 默认日期
const currentDate = ref('近6月')
// 日期列表
const dateList = ref<string[]>([
  '近1月',
  '近3月',
  '近6月',
  '近1年',
  '近3年',
  '近5年',
  '成立来',
  '今年来',
])
// 图表配置
const chartOpts = ref({
  tooltip: {
    trigger: 'axis',
    show: true,
    // 自定义提示窗
    formatter: (params) => {
      const name = params[0].data.date
      return (
        name +
        '\n' +
        '净值涨幅' +
        '：' +
        converToPercent(
          (params[0].data.value - params[0].data.firstVal) / params[0].data.firstVal,
          2,
        )
      )
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      // saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: 'value',
    show: true,
    min: 1,
  },
  series: [
    {
      name: '单位净值',
      type: 'line',
      showAllSymbol: true,
      data: [],
      itemStyle: {
        color: '#728bf5',
      },
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#e7ebfe',
          },
          {
            offset: 1,
            color: '#fff',
          },
        ]),
      },
      lineStyle: {
        width: 1.2,
      },
    },
  ],
})

// 计算百分数
const converToPercent = (data: number, fixeds: number) => {
  const percents = (data * 100).toFixed(fixeds)
  return `${percents}%`
}

// 加载趋势线的数据
const loadLineData = async () => {
  // 参数
  const params = { holdId: props.optId, str: currentDate.value, lineType: props.lineType }
  await http.get('/sys/fund/trade/queryLine', params).then((res: any) => {
    if (res.success) {
      // 数据设置默认值
      chartOpts.value.xAxis.data = []
      chartOpts.value.series[0].data = []
      // 获取结果集
      const result = res.result
      // 总数量
      const size = result.length
      // 第一项数据
      const fisrtData = size > 0 ? result[0] : null
      // 最小值,随机设置个默认值
      let minVal = 9999
      for (let i = 0; i < size; i++) {
        // 数据
        const item = result[i]
        // 最小值
        minVal = minVal > item.now_val ? item.now_val : minVal
        // 设置x轴数据
        chartOpts.value.xAxis.data.push(item.v_date)
        // 标记点颜色
        let symbolColor = 'red'
        if (item.trade_id !== null) {
          if (item.trade_type === 0) {
            symbolColor = 'red'
          } else if (item.trade_type === 1) {
            symbolColor = 'green'
          }
        }
        // 设置净值数据
        chartOpts.value.series[0].data.push({
          value: item.now_val,
          firstVal: fisrtData === null ? 0 : fisrtData.now_val,
          date: item.val_date,
          symbol: item.trade_id !== null ? 'circle' : 'none',
          itemStyle: { color: symbolColor },
          rate: item.val_rate,
          label: {
            show: item.val_rate <= -5,
            formatter: (params) => {
              return '跌' + (-params.data.rate).toFixed(2) + '%'
            },
            fontSize: 6,
            color: '#fff',
            backgroundColor: 'green',
            padding: 3,
            borderRadius: 2,
            rotate: 20,
            position: 'left',
          },
        })
        // 设置y轴最小值
        chartOpts.value.yAxis.min = Number((minVal - 0.02).toFixed(2))
      }
    }
  })
}

// 图表初始化
const initChart = async () => {
  if (!chartRef.value) return
  // 配置图表
  const myChart = await chartRef.value.init(echarts)
  // 显示loading
  myChart.showLoading({ text: '正在加载中，耐心等待...' })
  // 加载数据
  await loadLineData()
  // 设置数据
  myChart.setOption(chartOpts.value)
  // 隐藏loading
  myChart.hideLoading()
}

// 选择日期
const onClickTab = (param) => {
  currentDate.value = param
  initChart()
}

onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  initChart()
})
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  // padding: 20rpx 15rpx;
  .fu-date {
    width: 90%;
    margin: 2px auto;
    text-align: center;
    border: 1px solid #f4f5f7;
    padding: 14rpx 0px;
    border-radius: 15px;
    font-size: 24rpx;
  }
  .fu-date-active {
    background-color: #e9f0ff;
    color: #0083ff;
  }
}
</style>
